<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign in with Apple</title>
    <!-- 引入 Apple Sign-In SDK -->
    <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
</head>
<body>
<!-- Apple Sign-In 按钮 -->
<div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>

<!-- JavaScript to initialize Apple Sign-In -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        AppleID.auth.init({
            clientId : 'com.example.client-identifier',  // 替换为你的客户端 ID
            scope : 'name email',
            redirectURI : 'https://example.com/callback',  // 替换为你的重定向 URI
            state : 'state',  // 可选参数，用于防止 CSRF 攻击
            usePopup : true  // 如果希望使用弹出窗口进行登录，而不是重定向
        });

        // 在用户点击 Apple Sign-In 按钮时触发
        document.getElementById('appleid-signin').addEventListener('click', function() {
            AppleID.auth.signIn().then(function(response) {
                // 处理成功的响应
                console.log('Apple Sign-In 成功:', response);

                // 你可以在此处发送 id_token 到后端进行验证
                fetch('/verify-apple-token', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ id_token: response.authorization.id_token })
                }).then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            console.log('登录成功');
                        } else {
                            console.error('登录失败');
                        }
                    }).catch(error => {
                    console.error('服务器验证失败', error);
                });

            }).catch(function(error) {
                // 处理错误
                console.error('Apple Sign-In 失败:', error);
            });
        });
    });
</script>
</body>
</html>
